<template>
  <b-container>
    <b-row class="my-5 bdb" v-for="(item,index) in TeacherList" :key="index" >
      <b-col lg="2" md="3" sm="4">
        <img :src="require(`../assets/${item.tpic}`)" class="img-fluid" alt />
      </b-col>
      <b-col lg="10" md="9" sm="8">
        <h3>
          {{item.tname}}
          <span>{{item.maincourse}}</span>
        </h3>
        <dl>
          <dt>工作经历：</dt>
          <dd>{{item.experience}}</dd>
        </dl>
        <dl>
          <dt>授课风格：</dt>
          <dd>{{item.style}}</dd>
        </dl>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      TeacherList:[]
    };
  },
  created() {},
  mounted() {
    this.getTeachers();
  },
  watch: {},
  computed: {  
  },
  methods: {
    getTeachers(){
      this.axios.get("/teacher/list")
      .then((res)=>{
        console.log(res.data.data);
        this.TeacherList=res.data.data
      })
    }
  }
};
</script>
<style scoped>
.bdb{border-bottom: 2px solid #cccc;}
</style>